<template>
  <div class="el_card_main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          ref="formSelect"
          :model="formSelect"
          label-width="80px"
          :inline="true"
        >
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="formSelect.subjectID"
                  style="width: 290px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in SubjectList"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select style="width: 290px" placeholder="请选择">
                  <el-option
                    v-for="item in Null"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择" style="width: 290px">
                  <el-option
                    v-for="item in Null"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据题干搜索"
                  v-model="formSelect.keyword"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="formSelect.questionType"
                  style="width: 290px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in questionType"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  v-model="formSelect.difficulty"
                  style="width: 290px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in difficulty"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  v-model="formSelect.direction"
                  style="width: 290px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="formSelect.creatorID"
                  style="width: 290px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in Null"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formSelect.remarks" clearable> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="formSelect.shortName" clearable> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <div>
                  <el-select
                    v-model="formSelect.province"
                    @change="getCityList()"
                    style="width: 145px"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="formSelect.city"
                    placeholder="请选择"
                    style="width: 145px"
                  >
                    <el-option
                      v-for="(item, index) in citysList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                style="float: right; padding: 3px 0"
                icon="el-icon-edit"
                type="success"
                @click="$router.push('/questions/new')"
                >新增试题</el-button
              >
              <el-form-item style="float: right; padding-right: 12px">
                <el-button style="padding: 3px 0" @click="clearContent"
                  >清空</el-button
                >
                <el-button
                  style="padding: 3px 0"
                  type="primary"
                  @click="goSearch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-alert :title="title" type="info" show-icon :closable="closable">
      </el-alert>
      <!-- 企业列表 -->
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="direction" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template #default="tableData">
              <span>{{ (tableData.questionType = 1 ? '单选' : '多选') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干"> </el-table-column>
          <el-table-column prop="addDate" label="录入时间"> </el-table-column>
          <el-table-column prop="difficulty" label="难度"> </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-view"
                plain
                circle
                style="width: 32px; height: 32px"
                @click="handleView(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-edit"
                plain
                circle
                style="width: 32px; height: 32px"
                @click="handleEdit(scope.row.id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                style="width: 32px; height: 32px"
                @click="handleDelete(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-check"
                plain
                circle
                style="width: 32px; height: 32px"
                @click="handleChoice(scope.row.id,scope.row.choiceState)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <questionsPreview ref="preview" :example="example" />
      <!-- 放置分页组件 -->
      <el-row type="flex" style="height: 60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <el-pagination
          layout="prev, pager, next, sizes,jumper"
          :total="total"
          :current-page="obj.page"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="obj.pagesize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as QList, detail, choiceAdd } from '@/api/hmmm/questions.js'
import { list, remove, update } from '@/api/hmmm/subjects.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      input: '',
      value: false,
      dialogVisible: false,
      dialogFormVisible: false,
      closable: false,
      optionType: false,
      id: null,
      example: null,
      // 筛选表单
      formSelect: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        province: null,
        city: null,
        page: 1,
        pagesize: 5
      },
      // 无数据列表
      Null: [],
      // 学科列表
      SubjectList: [],
      // 1,2级城市列表
      provincesList: [],
      citysList: [],
      // 表单校验规则
      rules: {},
      // 页数
      obj: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      tableData: []
    }
  },

  async created () {
    this.renderTable()
    this.getProvinceList()
    this.getSubjectList()
  },

  methods: {
    // 加入精选
    async handleChoice (id, choiceState) {
      const data = {
        id,
        choiceState
      }
      const res = await choiceAdd(data)
      console.log(res)
      this.$message.success('加入精选成功!')
    },
    // SubjectList
    async getSubjectList () {
      const { data } = await list()
      this.SubjectList = [...data.items]
    },
    // 搜索功能
    async goSearch () {
      const { data } = await QList(this.formSelect)
      this.tableData = data.items

      this.renderTable()
    },
    // 清空事件
    clearContent () {
      this.input = ''
    },
    // 渲染表单
    async renderTable () {
      const { data } = await QList(this.obj)
      this.total = data.counts
      this.tableData = [...data.items]
    },
    // 编辑成员
    async handleEdit (id) {
      const data = {
        id
      }
      const res = await detail(data)
      console.log(res.data)
      this.$router.push({
        name: 'questions-new',
        params: {
          form: res.data
        }
      })
      // TODO
    },
    // 删除成员
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(row.id)
          console.log(res)

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.renderTable()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取城市1级
    async getProvinceList () {
      const data = await provinces()
      this.provincesList = [...data]
    },
    // 获取城市2级
    async getCityList () {
      const data = await citys(this.formSelect.province)
      this.citysList = [...data]
    },
    // 更新成员
    async updateForm () {
      const res = await update(this.form)
      console.log(res)
      this.closeDialog()
    },
    // 关闭弹窗,并重置表单
    closeDialog () {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    // 浏览题目
    async handleView (row) {
      this.$refs.preview.dialogVisible = true
      const data = {
        id: row.id
      }
      const res = await detail(data)
      this.example = res.data
      console.log(this.example)
    },
    // 页数变化时触发
    handlePageChange (pageNum) {
      this.obj.page = pageNum
      this.renderTable()
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      this.obj.pagesize = pageSize
      this.renderTable()
    }
  },
  computed: {
    // 消息记录
    title () {
      return `数据一共 ${this.total} 条`
    },
    direction () {
      return direction
    },
    questionType () {
      return questionType
    },
    difficulty () {
      return difficulty
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 1681px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  .button_box {
    display: flex;
    width: 220px;
  }
  .el-input {
    width: 290px;
    height: 32px;
    padding: 0;
  }
  .addForm {
    .el-input {
      width: 280px;
      height: 36px;
    }
  }
  .el-button--default {
    width: 56px;
    height: 32px;
    margin: 0 0 0 15px;
  }
  .el-alert--info {
    margin-bottom: 20px;
  }
  .el-button--primary {
    width: 56px;
    height: 32px;
  }
  .el-button--success {
    width: 97px;
    height: 32px;
    font-size: 12px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
</style>
